<template>
  <div>
    <a-modal
      v-model="visible"
      title="型号"
      ok-text="确认"
      cancel-text="取消"
      @cancel="visible = false"
      @ok="OK"
    >
      <a-modal
        v-model="specEditVisible"
        title="型号编辑"
        ok-text="确认"
        cancel-text="取消"
        @cancel="specEditVisible = false"
        @ok="SpecOK"
      >
        <a-form-model>
          <a-form-model-item label="型号" v-if="curIndex == -1">
            <a-input v-model="curItem.name"></a-input>
          </a-form-model-item>
          <a-form-model-item label="厂家">
            <a-input v-model="curItem.factory"></a-input>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
      <a-button @click="add">增加</a-button>
      <a-table
        size="small"
        :columns="pcolumns"
        :data-source="items"
        :rowKey="(record) => record.name"
      >
        <template slot="operation" slot-scope="text, record, index">
          <a-space>
            <a-popconfirm
              title="请确认是否删除?"
              @confirm="() => onDelete(record, index)"
            >
              <a href="javascript:;">删除</a>
            </a-popconfirm>
            <a href="javascript:;" @click="edit(record, index)">编辑</a>
          </a-space>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>
<script>
const pcolumns = [
  {
    title: "型号",
    dataIndex: "name",
  },
  {
    title: "厂家信息",
    dataIndex: "factory",
  },
  {
    title: "操作",
    key: "operation",
    scopedSlots: { customRender: "operation" },
  },
];
export default {
  data() {
    return {
      visible: false,
      specEditVisible: false,
      items: [],
      curItem: {},
      curIndex: -1,
      pcolumns,
      fun: undefined,
    };
  },
  methods: {
    Show(items, fun) {
      this.items = JSON.parse(JSON.stringify(items));
      this.fun = fun;
      this.visible = true;
    },
    add() {
      this.curItem = { name: "", factory: "" };
      this.curIndex = -1;
      this.specEditVisible = true;
    },
    edit(record, index) {
      this.curItem = JSON.parse(JSON.stringify(record));
      this.curIndex = index;
      this.specEditVisible = true;
    },
    OK() {
      if (this.fun) {
        let self = this;
        this.fun(this.items)
          .then(() => {
            self.visible = false;
          })
          .catch((err) => {
            self.$message.warn("错误:" + err);
          });
      }
    },
    onDelete(record, index) {
      this.items.splice(index, 1);
      this.curIndex = -1;
    },
    SpecOK() {
      let self = this;
      if (this.curIndex == -1) {
        let index = this.items.findIndex((item) => {
          return item.name == self.curItem.name;
        });
        if (index == -1) {
          this.items.push(this.curItem);
        } else {
          this.$message.warn("型号名称重复，请修改名称后再保存");
          return;
        }
      } else {
        this.$set(this.items, this.curIndex, this.curItem);
      }
      this.specEditVisible = false;
    },
  },
};
</script>
